<template>
  <div ref="pageRef" style="height: 100%">
    <div ref="headerRef">
     
    </div>
    <CommonTable :columns="columns" :table-data="tableData" >
      <template v-slot:operate="scope">
        <el-button
          v-for="name of operateButtons"
          :key="name"
          type="primary"
          size="small"
          @click="handleClick(name, scope.row)"
        >
          {{ name }}
        </el-button>
      </template>
    </CommonTable>
    <div ref="footerRef" style="display: flex; justify-content: center; margin-top: 10px">
      <el-pagination
        small
        background
        layout="prev, pager, next"
        popper-class="page-popper"
        :total="tablePageConfig.total"
        :page-size="tablePageConfig.pageSize"
        @current-change="handleCurrentChange"
        :current-page="tablePageConfig.currentPage"
      />
    </div>
  </div>
  <el-dialog v-model="dialogFormVisible">
    <template #header>
      <div class="dialog-header">新增项目</div>
    </template>
    <el-form ref="formRef" inline :model="addForm" :label-width="100">
      <el-form-item
        v-for="item of formConfig"
        :key="item.key"
        :label="item.label"
        :prop="item.key"
        :rules="item.rules"
      >
        <el-input v-model="addForm[item.key]" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" size="small" @click="confirmAdd"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, computed } from "vue";
import CommonTable from "./index.vue";
import type { FormInstance } from "element-plus";

let tablePageConfig = reactive({
  pageSize: 4,
  currentPage: 10,
  total: 10,
});
const handleCurrentChange = (e) => {
  console.log(e);
  tablePageConfig.currentPage = e;
};

const searchItemList = [
  {
    key: "projectName",
    label: "指标名称",
  },
];

const columns = [
  {
    prop: "projectName",
    label: "指标名称",
  },
  {
    prop: "projectStartTime",
    label: "权重",
  },
  {
    prop: "operate",
    label: "操作",
  },
];
const tableData = [
  {
    projectName: "平陆运河船闸先导工程",
    projectStartTime: "2022-10-15",
    locationOfTheProject: "广西钦州",
    updateTime: "2023-10-7",
    monitoringState: "项目已完工",
    alertState: "0/0/0/0",
  },
];
const operateButtons = ["修改"];
const formConfig = [
  {
    label: "指标名称",
    key: "AssessmentName",
    rules: [{ required: true, message: "项目名称不能为空" }],
  },

  {
    label: "权重",
    key: "AssessmentBuild",
  },
];

const dialogFormVisible = ref(false);

const addForm = reactive({
  id: "",
  projectName: "333",
  locationOfTheProject: "",
  projectStartTime: "",
});

const headerRef = ref<HTMLElement | null>(null);
const pageRef = ref<HTMLElement | null>(null);
const footerRef = ref<HTMLElement | null>(null);



function getList(params) {
  console.log(params, "params");
}

function handleAdd() {
  dialogFormVisible.value = true;
}
function handleEdit() {
  dialogFormVisible.value = true;
  // addForm.
  // 设置基本数据
}
const formRef = ref<FormInstance>();

async function confirmAdd() {
  await formRef.value?.validate();
  dialogFormVisible.value = false;
}

function handleClick(name, row) {
  console.log(name, row);
}
</script>

<style lang="less" scoped>
.dialog-header {
//   color: $theme-color-main;
}
</style>
